<template>
  <NicePopover v-model:open="open" content-class="relative right-2 w-[360px] p-0">
    <template #trigger>
      <div class="flex-center mr-2 h-full" @click.stop="toggle()">
        <NiceIconButton class="bell-button text-foreground relative" tooltip="消息通知">
          <span v-if="dot" class="bg-danger absolute right-0.5 top-0.5 h-2 w-2 rounded"></span>
          <i class="i-custom-notification?mask dark:text-foreground size-5"></i>
        </NiceIconButton>
      </div>
    </template>

    <div class="relative">
      <div class="flex items-center justify-between p-4 py-3">
        <div class="text-foreground">通知</div>
        <NiceIconButton
          :disabled="notifications.length <= 0"
          tooltip="全部标记为已读"
          @click="handleMakeAll"
        >
          <Icon icon="lucide:mail-check" class="size-4" />
        </NiceIconButton>
      </div>
      <NiceScrollbar v-if="notifications.length > 0">
        <ul class="!flex max-h-[360px] w-full flex-col">
          <template v-for="item in notifications" :key="item.title">
            <li
              class="hover:bg-accent border-border relative flex w-full cursor-pointer items-start gap-5 border-t px-3 py-3"
              @click="handleClick(item)"
            >
              <span
                v-if="!item.isRead"
                class="bg-primary absolute right-2 top-2 h-2 w-2 rounded"
              ></span>

              <span class="relative flex h-10 w-10 shrink-0 overflow-hidden rounded-full">
                <img
                  :src="item.avatar"
                  class="aspect-square h-full w-full object-cover"
                  role="img"
                />
              </span>
              <div class="flex flex-col gap-1 leading-none">
                <p class="font-semibold">{{ item.title }}</p>
                <p class="text-muted-foreground my-1 line-clamp-2 text-xs">
                  {{ item.message }}
                </p>
                <p class="text-muted-foreground line-clamp-2 text-xs">
                  {{ item.date }}
                </p>
              </div>
            </li>
          </template>
        </ul>
      </NiceScrollbar>

      <template v-else>
        <div class="flex-center text-muted-foreground min-h-[150px] w-full">暂无数据</div>
      </template>

      <div class="border-border flex items-center justify-between border-t px-4 py-3">
        <NiceButton
          :disabled="notifications.length <= 0"
          size="sm"
          variant="ghost"
          @click="handleClear"
        >
          清空
        </NiceButton>
        <NiceButton size="sm" @click="handleViewAll">查看所有消息</NiceButton>
      </div>
    </div>
  </NicePopover>
</template>
<script lang="ts" setup>
  import { Icon } from '@iconify/vue'
  import { NiceButton, NiceIconButton, NicePopover, NiceScrollbar } from '@nice/nice-ui'
  import { useToggle } from '@vueuse/core'

  interface NotificationItem {
    avatar: string
    date: string
    isRead?: boolean
    message: string
    title: string
  }

  interface Props {
    /**
     * 显示圆点
     */
    dot?: boolean
    /**
     * 消息列表
     */
    notifications?: NotificationItem[]
  }

  defineOptions({ name: 'NotificationPopup' })

  withDefaults(defineProps<Props>(), {
    dot: false,
    notifications: () => [],
  })

  const emit = defineEmits<{
    clear: []
    'make-all': []
    read: [NotificationItem]
    'view-all': []
  }>()

  const [open, toggle] = useToggle()

  function close() {
    open.value = false
  }

  function handleViewAll() {
    emit('view-all')
    close()
  }

  function handleMakeAll() {
    emit('make-all')
  }

  function handleClear() {
    emit('clear')
  }

  function handleClick(item: NotificationItem) {
    emit('read', item)
  }
</script>

<style lang="scss" scoped>
  :deep(.bell-button) {
    &:hover {
      i {
        animation: bell-ring 1s both;
      }
    }
  }

  @keyframes bell-ring {
    0%,
    100% {
      transform-origin: top;
    }

    15% {
      transform: rotateZ(10deg);
    }

    30% {
      transform: rotateZ(-10deg);
    }

    45% {
      transform: rotateZ(5deg);
    }

    60% {
      transform: rotateZ(-5deg);
    }

    75% {
      transform: rotateZ(2deg);
    }
  }
</style>
